<template>
  <div class="mainWarp">
    <van-nav-bar title="商品分类" />
    <van-tree-select
      v-model:main-active-index="activeIndex"
      height="90vh"
      :items="typelist"
      @click-nav="changeType"
    >
      <template #content>
        <div class="aui-flex-links" v-if="prolist.length > 0">
          <router-link
            v-for="item in prolist"
            :key="item.id"
            :to="{ path: '/product/product/info', query: { proid: item.id } }"
            class="aui-flex-links-item"
          >
            <div class="aui-flex-links-img"><img :src="item.thumbs_text" alt="" /></div>
            <div class="aui-flex-links-text">{{ item.name }}</div>
          </router-link>
        </div>
        <div class="aui-flex-links" v-else>
          <div style="color: #c8c9cc; text-align: center">暂无商品数据</div>
        </div>
      </template>
    </van-tree-select>
  </div>
  <Footer />
</template>
<script setup>
import Footer from "@/components/common/footer.vue";
const typelist = ref([{
      text: "全部",
      id: 0,
      thumb_text: "",
    }]);
const prolist = ref([]);
const typeid = ref(0);
const activeIndex = ref(0);
onMounted(() => {
  TypeData();
  getTypeData();
});
// 获取产品数据
const TypeData = async () => {
  var data = {
    typeid: typeid.value,
    flag: 0,
    orderby: "id",
    keywords: "",
  };
  var result = await Api.productList(data);
  if (result.code == 1) {
    prolist.value = result.data;
  }
};
// 获取分类
const  getTypeData = async() =>{
  var result = await Api.productType();
  if (result.code == 1) {
    result.data.forEach((item) => {
      typelist.value.push({
        text: item.name,
        id: item.id,
        thumb_text: item.thumb_text,
      });
    });
  }
}
const changeType = (index) => {
  typeid.value = typelist.value[index].id;
  TypeData();
};
</script>
<style scoped>
.aui-flex-links {
  padding: 10px 8px;
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  margin-top: 15px;
  padding-bottom: 20px;
}

.aui-flex-links-item {
  position: relative;
  float: left;
  padding: 5px 0;
  width: 44%;
  box-sizing: border-box;
  margin: 0 3%;
}

.aui-flex-links-img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.aui-flex-links-text {
  color: #444;
  font-size: 12px;
  text-align: center;
  padding-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
